import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
  Drawer,
  Row,
  Col,
  Switch,
  Progress, DatePicker, Select, Menu, Dropdown, Tooltip,
} from 'antd';
import MyPagination from '@/components/MyPagination';
import Loading from '@/components/Loading';
import request from '@/utils/request';
import find from 'lodash/find';
import debounce from 'lodash/debounce';
import {ellipsis, afterCloseModal, DescriptionItem, download, formateObjToParamStr} from '@/utils/utils';
import { routerRedux } from 'dva/router';
import party from './../../images/party.png'
import party_org from './../../images/party_org.png'
import BuildModalTitle from '@/components/BuildModalTitle';
import ReactDataGrid from 'react-data-grid';
import AddOrEditUser from './addOrEditUser';
import Pay from './../PartyFee/addOrEditUser';
import Comment from './../PartyComments/addOrEditUser';
import PayDetail from './PayDetail';
import CommentDetail from './CommentDetail';
import ImportOrExport from './ImportOrExport';
import config from "@/config/config";

const FormItem = Form.Item;
const { confirm } = Modal;
const { Option } = Select;

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

@connect(({ party_member, loading, global }) => ({
  party_member,
  global,
  loading: loading.models.party_member,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      showAddBtn: find(this.permissions, { name: 'device_add_and_edit' }),
      showdelBtn: find(this.permissions, { name: 'device_delete' }),
      showPasswordBtn: find(this.permissions, { name: 'user_default_password_edit' }),
      user_password_reset: find(this.permissions, { name: 'user_password_reset' }),
      visible: false,
      done: false,
      page: 1,
      per_page: 30,
      username: '',
      editRecord: {},
      selectedRowKeys: [],
      party_member_situations:{
        age:[],
        nationality:[],
        sex:[],
        type:[],
      }
    };
  }


  componentDidMount() {

    const { dispatch } = this.props;
    const {
      party_member: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    const table = document.querySelector('.react-grid-Canvas');
    if (pageLoaded) {
      setTimeout(() => {
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);

    } else {
      const {
        party_member: { searchParams },
      } = this.props;
      console.log('searchParams', searchParams);
      dispatch({
        type: 'party_member/fetch',
        payload: searchParams,
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: 'party_member/changeLoaded',
          });
          dispatch({
            type: 'party_member/changeTableY',
          });
        },
      });

    }
    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));
    const that=this;
    request(`/party_member_team_situations`, {
      method: 'GET',
    }).then((response)=> {
      console.log("党员构成",response)
      if(response.status===200){
        that.setState({
          party_member_situations:response.data.data
        })
      }
    })
  }

  scroll = (e) => {
    console.log('scroll');
    const { dispatch } = this.props;
    dispatch({
      type: 'party_member/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  resize = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'party_member/changeTableY',
    });
  };
  findChildFunc = (cb) => {
    this.file = cb;
  };

  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
    const table = document.querySelector('.react-grid-Canvas');
    table.removeEventListener('scroll', debounce(this.scroll, 300));
  }

  handleSearch = (values, cb) => {
    console.log('handleSearch', values);
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'party_member/fetch',
      payload: {
        ...values,
      },
      callback() {
        console.log('handleSearch callback');
        if (cb) cb();
      },
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      party_member: { searchParams },
    } = this.props;
    return (
      <Form layout="inline" className="search-form">
        <FormItem>
          <FormItem label="党员状态">
            {getFieldDecorator('transfer_out', {
              initialValue: searchParams.transfer_out,
            })(
              <Select style={{width:'120px'}}>
                <Option value={-1}>
                  非转出
                </Option>
                <Option value={1}>
                  转出
                </Option>
                <Option value={''}>
                  全部
                </Option>
              </Select>
            )}
          </FormItem>
          <FormItem label="党员姓名">
            {getFieldDecorator('name', {
              initialValue: searchParams.name,
            })(<Input style={{ width: '150px' }} placeholder="请输入"/>)}
          </FormItem>
          <Button
            type="primary"
            icon='search'
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;

                this.handleSearch({
                  page: 1,
                  per_page: searchParams.per_page,
                  ...fieldsValue,
                });

              });
            }}
          >
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} icon='redo' onClick={this.handleFormReset}>
            重置
          </Button>
          {
            find(this.permissions, { name: 'party_member_edit' }) &&
            <Button
              icon="user-add"
              style={{ marginLeft: 8 }}
              type="primary"
              onClick={
                () => {
                  this.setState({
                    addModal: true,
                  });
                }
              }
            >
              添加党员
            </Button>
          }
          {
            find(this.permissions, { name: 'party_member_export' }) &&
            <Tooltip title={'请先查询一次再导出'}>
              <Button
                className={'btn-green'}
                type="primary"
                icon="export"
                style={{ marginLeft: 8 }}
                onClick={this.handleExportInfo}
              >导出党员信息
              </Button>
            </Tooltip>
          }
        </FormItem>

      </Form>
    );
  }

  handleAdd = () => {
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    for(let key in formValues){
      if(key.indexOf('time')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM-DD')
      }
      if(key.indexOf('month')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM')
      }
    }
    this.props.dispatch({
      type: 'party_member/add',
      payload: {
        ...formValues,

        type:5,
      },
      callback() {
        message.success('添加党员成功');
        that.setState({
          addModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch({
      username: '',
      page: 1,
      per_page: 50,
      transfer_out:-1
    });
  };

  handleEdit = () => {
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    for(let key in formValues){
      if(key.indexOf('time')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM-DD')
      }
    }
    this.props.dispatch({
      type: `party_member/edit`,
      payload: {
        ...formValues,
        id: this.state.editRecord.id,
        type:5,
      },
      callback() {
        message.success('修改党员成功');
        that.setState({
          editModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleDelete = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `party_member/remove`,
      payload: { id },
      callback: () => {
        message.success('删除党员成功');
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handlePay = () => {
    const formValues = this.PayForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    formValues.month=moment( formValues.month).format('YYYY-MM')
    this.props.dispatch({
      type: 'party_member/pay',
      payload: {
        ...formValues,
      },
      callback() {
        message.success('缴费成功');
        that.setState({
          payModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleComment = () => {
    const formValues = this.CommentForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    this.props.dispatch({
      type: 'party_member/comment',
      payload: {
        ...formValues,
      },
      callback() {
        message.success('民主评议成功');
        that.setState({
          commentModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleImport = () => {
    const formValues = this.ImportForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    for(let key in formValues){
      if(key.indexOf('time')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM-DD')
      }
      if(key.indexOf('month')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM')
      }
    }
    const that = this;
    this.props.dispatch({
      type: 'party_member/import2',
      payload: {
        ...formValues,
        id: this.state.editRecord.id,
      },
      callback() {
        message.success('转入成功');
        that.setState({
          importModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleExport = () => {
    const formValues = this.ExportForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    for(let key in formValues){
      if(key.indexOf('time')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM-DD')
      }
      if(key.indexOf('month')>=0 && formValues[key]){
        formValues[key]=moment( formValues[key]).format('YYYY-MM')
      }
    }
    const that = this;
    this.props.dispatch({
      type: 'party_member/export2',
      payload: {
        ...formValues,
        id: this.state.editRecord.id,
      },
      callback() {
        message.success('转出成功');
        that.setState({
          exportModal: false,
        });
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleCancelImport = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `party_member/cancel_import`,
      payload: { id },
      callback: () => {
        message.success('取消转入党员成功');
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleCancelExport = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `party_member/cancel_export`,
      payload: { id },
      callback: () => {
        message.success('取消转出党员成功');
        const {
          party_member: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleExportInfo=()=>{
    const {
      party_member: { searchParams },
    } = this.props;
    console.log('searchParams',searchParams)
    download(`${config.prefix}/party_member_files?Authorization=Bearer ${sessionStorage.getItem('token')}&order_direction=desc&${formateObjToParamStr({...searchParams,type:5,company_id:sessionStorage.getItem('company_id')})}`)

  }
  render() {
    const that = this;
    const {
      party_member: { data, loading, tableY, meta, searchParams, selectedRowKeys },
      global: { gridTableW },
    } = this.props;

    const defaultColumnProperties = {
      resizable: true,
    };
    const renderMenuItem=function(row) {
      return <Menu onClick={({ key })=>{
        console.log('key',key)
        if(key === 'import'){
          that.setState({
            editRecord: row,
            importModal: true,
          });
        }else if(key === 'cancel_import'){
          confirm({
            title: `确定要取消党员${row.name}转入吗?`,
            content: '请谨慎操作！',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            centered: true,
            maskClosable: true,
            onOk() {
              that.handleCancelImport(row.id);
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }else if(key === 'export'){
          that.setState({
            editRecord: row,
            exportModal: true,
          });
        }else if(key === 'cancel_export'){
          confirm({
            title: `确定要取消党员${row.name}转出吗?`,
            content: '请谨慎操作！',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            centered: true,
            maskClosable: true,
            onOk() {
              that.handleCancelExport(row.id);
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }else if(key === 'edit'){
          that.setState({
            editRecord: row,
            editModal: true,
          });
        }else if(key === 'delete'){
          confirm({
            title: `确定要删除党员${row.name}吗?`,
            content: '请谨慎操作！',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            centered: true,
            maskClosable: true,
            onOk() {
              that.handleDelete(row.id);
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }

      }
      }>
      {
        find(that.permissions, { name: 'party_member_transfer' }) &&
        <Menu.Item key={'import'}>
          转入
        </Menu.Item>
          }
        {
          find(that.permissions, { name: 'party_member_transfer' }) &&
        <Menu.Item key={'cancel_import'}>
          取消转入
        </Menu.Item>
          }
        {
          find(that.permissions, { name: 'party_member_transfer' }) &&
        <Menu.Item key={'export'}>
          转出
        </Menu.Item>
          }
        {
          find(that.permissions, { name: 'party_member_transfer' }) &&
        <Menu.Item key={'cancel_export'}>
          取消转出
        </Menu.Item>
      }
        {
          find(that.permissions, { name: 'party_member_edit' }) &&
            <Menu.Item key={'edit'}>
              编辑
            </Menu.Item>
          }
            {
              find(that.permissions, { name: 'party_member_edit' }) &&
            <Menu.Item key={'delete'}>
              删除
            </Menu.Item>
        }
      </Menu>
    }

    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen: true,
        formatter: (event) => {
          const {
            party_member: { meta },
          } = this.props;
          return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
        },
      },
      {
        name: '党员姓名',
        frozen: true,
        width: 160,
        key: 'name',
        formatter: (event) => {
          return <Fragment><img src={party} style={{width:'22px',height:'22px',marginRight:'5px'}} alt=""/>{event.value}</Fragment>;
        },
      },
      {
        name: '党员组织',
        frozen: true,
        width: 160,
        key: 'organization_name',
        formatter: (event) => {
          if(event.value){
            return <Fragment><img src={party_org} style={{width:'22px',height:'22px',marginRight:'5px'}} alt=""/>{event.value}</Fragment>;
          }else{
            return  ''
          }
        },
      },
      {
        name: '党内职务',
        width: 210,
        key: 'party_position',
      },
      {
        name: '是否转入',
        width: 80,
        key: 'transfer_in',
        formatter: (event) => {
          if(event.value===1){
            return '转入党员'
          }else{
            return  ''
          }
        },
      },
      {
        name: '是否转出',
        width: 80,
        key: 'transfer_out',
        formatter: (event) => {
          if(event.value===1){
            return '转出党员'
          }else{
            return  ''
          }
        },
      },
      {
        name: '职务',
        width: 160,
        key: 'position',
      },
      {
        name: '联系方式',
        width: 120,
        key: 'telephone',
      },
     /* {
        name: '籍贯',
        width: 80,
        key: 'hometown',
      },*/
      {
        name: '年龄',
        width: 80,
        key: 'age',
      },
      {
        name: '民族',
        width: 120,
        key: 'nationality',
      },
    /*  {
        name: '是否已缴当月党费',
        key: 'role_na1m22232e',
        width: 140,
      },*/
      {
        name: '操作',
        width: 620,
        key: 'right',
        classname: 'operate',
        formatter: (event) => <Fragment>
          {
            find(this.permissions, { name: 'party_fee_operation' }) &&
              <Fragment>
                <Button
                  className={'btn-gold'}
                  type="primary"
                  icon="pay-circle"
                  size="small"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      payModal: true,
                    });
                  }
                  }
                >缴纳党费
                </Button>
                <Button
                  type="primary"
                  icon="pay-circle"
                  size="small"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      payDetail: true,
                    });
                  }
                  }
                >缴纳党费记录
                </Button>
              </Fragment>
          }
          {
            find(this.permissions, { name: 'party_member_comment' }) &&
              <Fragment>
                <Button
                    className={'btn-cyan'}
                  type="primary"
                  icon="like"
                  size="small"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      commentModal: true,
                    });
                  }
                  }
                >民主评议
                </Button>
                <Button
                  type="primary"
                  icon="like"
                  size="small"
                  onClick={(e) => {
                    this.setState({
                      editRecord: event.row,
                      commentDetail: true,
                    });
                  }
                  }
                >民主评议记录
                </Button>
              </Fragment>
          }
          <Dropdown overlay={renderMenuItem(event.row)} placement="bottomRight">
            <Button   size="small">更多<Icon type="down" /></Button>
          </Dropdown>


        </Fragment>,
      },

    ].map(c => ({ ...defaultColumnProperties, ...c }));

    let totalWidth = 0;
    for (let i = 0; i < columns.length; i++) {
      totalWidth += columns[i].width;
    }
    if (totalWidth < gridTableW) {
      columns[columns.length - 1].width = columns[columns.length - 1].width + gridTableW - totalWidth;
    }

    return <div className="custom-card">
      <div className="table-title"><span className={'title-item'}>党员管理</span>
      </div>
      <div className="table-page">
        <div style={{display:'flex',fontSize: "16px",color:'#111',background:'#eee',padding:'15px 20px'}}>
          <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
              <div>党员总数 : <span style={{color:'red',fontWeight:'bold'}}>{this.state.party_member_situations.total_count}</span> 人</div>
          </div>
          <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
              <div>女党员 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.sex.length>0&&find(this.state.party_member_situations.sex,(o)=>o.name==='女').count}</span> 人,
              占比 : {this.state.party_member_situations.sex.length>0&&find(this.state.party_member_situations.sex,(o)=>o.name==='女').percentage}</div>
              <div>男党员 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.sex.length>0&&find(this.state.party_member_situations.sex,(o)=>o.name==='男').count}</span> 人,
              占比 : {this.state.party_member_situations.sex.length>0&&find(this.state.party_member_situations.sex,(o)=>o.name==='男').percentage}</div>
          </div>
          <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
            <div>少数民族 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.nationality.length>0&&find(this.state.party_member_situations.nationality,(o)=>o.name==='少数民族').count}</span> 人,
          占比 : {this.state.party_member_situations.nationality.length>0&&find(this.state.party_member_situations.nationality,(o)=>o.name==='少数民族').percentage}</div>
            <div>汉族 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.nationality.length>0&&find(this.state.party_member_situations.nationality,(o)=>o.name==='汉族').count}</span> 人,
          占比 : {this.state.party_member_situations.nationality.length>0&&find(this.state.party_member_situations.nationality,(o)=>o.name==='汉族').percentage}</div>
          </div>
          <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
            <div>35岁及以下 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='三十五岁及以下').count}</span> 人,
          占比 : {this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='三十五岁及以下').percentage}</div>
            <div>35岁以上 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='三十五岁以上').count}</span> 人,
          占比 : {this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='三十五岁以上').percentage}</div>
            <div>未知 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='未知').count}</span> 人,
          占比 : {this.state.party_member_situations.age.length>0&&find(this.state.party_member_situations.age,(o)=>o.name==='未知').percentage}</div>
        </div>
          <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
            <div>积极分子 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='积极分子').count}</span> 人,
          占比 : {this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='积极分子').percentage}</div>
            <div>发展对象 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='发展对象').count}</span> 人,
          占比 : {this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='发展对象').percentage}</div>
            <div>预备党员 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='预备党员').count}</span> 人,
          占比 : {this.state.party_member_situations.type.length>0&&find(this.state.party_member_situations.type,(o)=>o.name==='预备党员').percentage}</div>
          </div>
        </div>
        <div className="table-condition">{this.renderSimpleForm()}</div>
        <div className={'table-data-content'}>
          <ReactDataGrid
            columns={columns}
            rowGetter={i => {
              return { ...data[i], _index: i };
            }}
            rowsCount={data.length}
            minHeight={tableY}
            rowSelection={{
              showCheckbox: false,
              enableShiftSelect: true,
              selectBy: {
                indexes: selectedRowKeys,
              },
            }}
            onRowClick={
              (row) => {
                this.props.dispatch({
                  type: 'party_member/changeSelectRow',
                  payload: [row],
                });
              }
            }

          />
          {
            loading && <Loading/>
          }
        </div>


      </div>
      <div className="table-pagination">
        <MyPagination searchCondition={{ ...searchParams }} meta={meta} handleSearch={this.handleSearch}/>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="添加党员"/>}
        className="addModal"
        visible={this.state.addModal}
        centered
        width={1300}
        onCancel={() => {
          this.setState({ addModal: false });
        }}
        onOk={this.handleAdd}
      >
        <AddOrEditUser
          wrappedComponentRef={(inst) => this.AddForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={`修改 : ${this.state.editRecord.name}`}/>}
        destroyOnClose
        visible={this.state.editModal}
        centered
        onOk={this.handleEdit}
        className="editModal"
        width={1300}
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ editModal: false, editRecord: {} });
        }}

      >
        <AddOrEditUser
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.EditForm = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.payModal} modalClass="payModal"
                                title={`${this.state.editRecord.name} 党费缴纳`}/>}
        destroyOnClose
        visible={this.state.payModal}
        centered
        onOk={this.handlePay}
        className="payModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ payModal: false, editRecord: {} });
        }}

      >
        <Pay
          editRecord={{party_member:this.state.editRecord}}
          wrappedComponentRef={(inst) => this.PayForm = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.importModal} modalClass="importModal"
                                title={`${this.state.editRecord.name} 转入`}/>}
        destroyOnClose
        visible={this.state.importModal}
        centered
        onOk={this.handleImport}
        className="importModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ importModal: false, editRecord: {} });
        }}

      >
        <ImportOrExport
        type={'import'}
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.ImportForm = inst}/>
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.exportModal} modalClass="exportModal"
                                title={`${this.state.editRecord.name} 转出`}/>}
        destroyOnClose
        visible={this.state.exportModal}
        centered
        onOk={this.handleExport}
        className="exportModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ exportModal: false, editRecord: {} });
        }}

      >
        <ImportOrExport
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.ExportForm = inst}/>
      </Modal>
      <Drawer
        title={`${this.state.editRecord.name} 缴纳党费记录`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
            payDetail: false,
          });
        }}

        width={600}
        visible={this.state.payDetail}
      >
        <PayDetail party_member_id={this.state.editRecord.id}></PayDetail>
      </Drawer>
      <Modal
        title={<BuildModalTitle visible={this.state.commentModal} modalClass="commentModal"
                                title={`${this.state.editRecord.name} 党费缴纳`}/>}
        destroyOnClose
        visible={this.state.commentModal}
        centered
        onOk={this.handleComment}
        className="commentModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ commentModal: false, editRecord: {} });
        }}

      >
        <Comment
          editRecord={{party_member:this.state.editRecord}}
          wrappedComponentRef={(inst) => this.CommentForm = inst}/>
      </Modal>
      <Drawer
        title={`${this.state.editRecord.name} 民主评议记录`}
        placement="right"
        destroyOnClose
        onClose={() => {
          this.setState({
          commentDetail: false,
          });
        }}

        width={600}
        visible={this.state.commentDetail}
      >
        <CommentDetail party_member_id={this.state.editRecord.id}></CommentDetail>
      </Drawer>
    </div>;
  }
}

export default BasicList;
